<script>
export default {
  name: 'home',
}
</script>
<script setup>
import HomeSearchBox from './components/home-search-box.vue'
import HomeCategories from './components/home-categories.vue'
import HomeContent from './components/home-content.vue'
import useHomeStore from '@/stores/modules/home'
import useScroll from '@/hooks/useScroll'
import SearchBar from '@/components/search-bar/search-bar.vue'
import { watch, ref, onActivated } from 'vue'

const homeStore = useHomeStore()
homeStore.getHotSuggestAction()
homeStore.getHomeCategoriesAction()
homeStore.getHomeHouselistAction()

// 监听页面滚动加载数据
const homeRef = ref()
const { isReachBottom, scrollTop } = useScroll(homeRef)
watch(isReachBottom, (newValue) => {
  if (newValue) {
    homeStore.getHomeHouselistAction().then(() => {
      isReachBottom.value = false
    })
  }
})

// 跳转到原来页面的位置
onActivated(() => {
  homeRef.value.scrollTo({
    top: scrollTop.value,
  })
})

// 搜索框显示逻辑
const isSearchBar = ref(false)
watch(scrollTop, (newValue) => {
  if (newValue >= 350) {
    isSearchBar.value = true
  } else {
    isSearchBar.value = false
  }
})
</script>

<template>
  <div class="home" ref="homeRef">
    <!-- 1.nav-bar -->
    <van-nav-bar title="Sokach旅途" />
    <!-- 2.轮播图 -->
    <van-swipe :autoplay="3000" indicator-color="white" lazy-render>
      <van-swipe-item>
        <img src="@/assets/img/home/banner.webp" alt="" />
      </van-swipe-item>
      <van-swipe-item>
        <img src="@/assets/img/home/banner.webp" alt="" />
      </van-swipe-item>
      <van-swipe-item>
        <img src="@/assets/img/home/banner.webp" alt="" />
      </van-swipe-item>
    </van-swipe>
    <!-- 3.搜索盒子 -->
    <HomeSearchBox />
    <!-- 4.分类组件 -->
    <HomeCategories />
    <!-- 5.热门精选 -->
    <HomeContent />
    <!-- 6.顶部搜索栏 -->
    <div class="search-box" v-if="isSearchBar">
      <SearchBar />
    </div>
  </div>
</template>

<style lang="less" scoped>
.home {
  height: 100vh;
  box-sizing: border-box;
  overflow-y: auto;
  padding-bottom: 60px;
  :deep(.van-nav-bar__title) {
    color: #ff9854 !important;
  }
  .van-nav-bar {
    height: 47px !important;
  }
  .van-swipe {
    height: 125px;
  }
  .van-swipe-item {
    height: 125px;
    img {
      height: 125px;
    }
  }
  .search-box {
    position: fixed;
    z-index: 9;
    top: 0;
    left: 0;
    right: 0;
    height: 45px;
    padding: 16px 16px 10px;
    background-color: #fff;
  }
}
</style>
